<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            color: blue;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="div1" class="div1">hello
        <div class="div2">div2</div>
        <div class="div3">div3</div>
    </div>
    <script>
        //1. 创建元素节点
        var h1 = document.createElement('h1')
        //    console.log(h1);

        // 2.创建文本节点
        var t1 = document.createTextNode('cn')

        // 3.创建属性节点
        var a1= document.createAttribute('color')
        a1.value = 'yellow'

        // 4.插入节点 父节点最后插入一个新子节点
        h1.appendChild(t1)

        var d1 = document.getElementById('div1')
        // 5.在节点之前插入,传两个参数，第一个是要插入的节点，第二个是参考的子节点
        d1.insertBefore(h1,null)

        // 6.删除子节点
        d1.removeChild(document.getElementsByClassName('div2')[0])
        // 删除自己
        document.getElementsByClassName('div3')[0].parentNode.removeChild(document.getElementsByClassName('div3')[0])

        // 7.克隆节点 带true参数会把子节点一起复制，不带参数或者带false，就复制节点自身 不复制子节点
        var cd1 = d1.cloneNode(true)
        document.getElementsByTagName('body')[0].insertBefore(cd1,d1)
        
        // 8.获取节点属性值 有三种方式 注意class 和classname
        console.log(d1.className,d1['style'],d1.getAttribute('class'));

        // 9.设置节点属性值 两种方式，设置同一个属性值会覆盖
        d1.style = 'color:black;font-size:20px'
        d1.setAttribute('style','width:300px')

        // 10，删除节点属性
        d1.removeChild('')

        // 11.


        
    </script>
</body>

</html>